<template>
  <div class="authorization" v-loading="loading">
    <div class="authorization_status tc">
      <span>
        {{ $t("sys.authorization_status") }}：<span :style="{
          backgroundColor:
            AUTHORIZATION_STATUS_ENUM[getAuthCenterInfo.status] &&
            AUTHORIZATION_STATUS_ENUM[getAuthCenterInfo.status].color,
        }" class="item-content"></span><span :style="{
  color:
    AUTHORIZATION_STATUS_ENUM[getAuthCenterInfo.status] &&
    AUTHORIZATION_STATUS_ENUM[getAuthCenterInfo.status].color,
}">{{
    AUTHORIZATION_STATUS_ENUM[getAuthCenterInfo.status] &&
    $t(AUTHORIZATION_STATUS_ENUM[getAuthCenterInfo.status].i18n)
}}</span>
      </span>
      <span class="ml80">
        {{ $t("sys.authorized_time") }}：<span>{{
            getAuthCenterInfo.accreditDate | moment
        }}</span>
      </span>
      <template v-if="getAuthCenterInfo.status !== 'TRIAL'">
        <span class="ml80">
          {{ $t("sys.authorized_user_seat") }}：<span>{{ getAuthCenterInfo.seatTotal }}{{ $t("sys.pieces") }}</span>
        </span>
        <span class="ml80">
          {{ $t("sys.authorized_user_seat_used") }}：<span>{{ getAuthCenterInfo.usedSeat }}{{ $t("sys.pieces") }}</span>
        </span>
        <span class="ml80">
          {{ $t("sys.authorized_user_seat_usable") }}：<span>{{ getAuthCenterInfo.unUsedSeat }}{{ $t("sys.pieces")
          }}</span>
        </span>
      </template>
    </div>
    <div>
      <el-button type="primary" @click="add">{{
          getAuthCenterInfo.status !== "TRIAL"
            ? $t("sys.add_authorized_user_seat")
            : $t("sys.official_authorized")
      }}</el-button>
      <el-button v-if="getAuthCenterInfo.status !== 'TRIAL'" @click="cancelActive">{{ $t("sys.cancel_authorization") }}
      </el-button>
    </div>
    <el-table class="mt10" :data="tableData" v-loading="loading" style="width: 100%" current-row-key="id" stripe border
      highlight-current-row>
      <el-table-column prop="license" :label="$t('sys.activate_code')"></el-table-column>
      <el-table-column prop="seatNum" :label="$t('sys.authorized_user_seat_num')">
        <template slot-scope="scope">
          <span>{{
              scope.row.seatCount === -1
                ? $t("sys.unlimited")
                : scope.row.seatCount + $t("sys.pieces")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="seatType" :label="$t('sys.type')">
        <template slot-scope="scope">
          <span>{{
              scope.row.seatType === "SYSTEM"
                ? $t("sys.authSystem")
                : $t("sys.authRecharge")
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog class="onlineDialog" :visible.sync="dialogVisible" width="350px" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="false">
      <div class="tc title">{{ $t("sys.confirm_deactivate") }}</div>
      <div class="tc content">{{ $t("sys.confirm_deactivated") }}</div>
      <div class="tc">
        <el-button class="dymBtn" :loading="dialogLoading" @click="cancelUnbind">{{ $t("sys.cancel") }}</el-button>
        <el-button class="dymBtn" :loading="dialogLoading" type="primary" @click="dialogSubmit">{{ $t("sys.confirm") }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="offlineDialogVisible" width="460px" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="false">
      <el-steps :align-center="true" :active="step" finish-status="success">
        <el-step :title="$t('sys.cancel_authorization')"></el-step>
        <el-step :title="$t('sys.activation_code_unbinding')"></el-step>
      </el-steps>
      <div class="str tc" v-if="step === 0">
        {{ $t("sys.confirm_deactivate_continue") }}
      </div>
      <div class="qrbox" v-if="step === 1">
        <div class="tc">
          <img :src="QRcodeUrl" width="126" height="126" />
          <div>{{ $t("sys.miniapp_scan_QRcode_unbind") }}</div>
        </div>
      </div>
      <div class="tc">
        <template v-if="step === 0">
          <el-button class="dymBtn" :loading="offlineDialogLoading" @click="cancelOfflineUnbind">{{ $t("sys.cancel") }}
          </el-button>
          <el-button class="dymBtn" :loading="offlineDialogLoading" type="primary" @click="offlineSubmit">{{
              $t("sys.affirm")
          }}</el-button>
        </template>
        <template v-if="step === 1">
          <el-button class="dymBtn" :loading="offlineDialogLoading" type="primary" @click="offlineSubmit">{{
              $t("sys.confirm_unbind")
          }}</el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLicenseIsOnline,
  getLicenseList,
  unbindAuth,
  getRemoteUnbindInfo,
  confirmUnbind,
} from "@/customApi/license.js"
import QRCODE from "qrcode"
import { mapGetters } from "vuex"
const AUTHORIZATION_STATUS_ENUM = {
  TRIAL: {
    i18n: "sys.onTrial_authorized",
    color: "#C01D02",
  },
  TEST: {
    i18n: "sys.test_authorized",
    color: "#F06A01",
  },
  FORMAL: {
    i18n: "sys.official_authorized",
    color: "#6ABF0F",
  },
}
export default {
  name: "AuthList",
  data() {
    return {
      AUTHORIZATION_STATUS_ENUM,
      loading: false,
      unbind_loading: false,
      tableData: [],
      offlineTimer: null,
      line_status: "offline",
      dialogVisible: false,
      dialogLoading: false,
      offlineDialogVisible: false,
      offlineDialogLoading: false,
      step: 0,
      QRcodeUrl: "",
    }
  },
  computed: {
    ...mapGetters(["getAuthCenterInfo"]),
  },
  async created() {
    this.offlineTimer && clearInterval(this.offlineTimer)
    this.judgeAthu()
    this.offlineTimer = setInterval(() => {
      this.judgeAthu()
    }, 20 * 1000)
    this.getList()
  },
  destroyed() {
    clearInterval(this.offlineTimer)
  },
  methods: {
    //获取授权历史记录
    getList() {
      this.loading = true
      getLicenseList()
        .then((res) => {
          this.tableData = res
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 获取在线状态
    judgeAthu() {
      getLicenseIsOnline()
        .then((res) => {
          this.line_status = res ? "online" : "offline"
          this.loading = false
        })
        .catch(() => {
          this.line_status = "offline"
          this.loading = false
        })
    },
    add() {
      this.$router.push({
        path: "/appSetting/authorization/add",
        query: {
          status: this.getAuthCenterInfo.status,
        },
      })
    },
    //打开解绑弹窗
    cancelActive() {
      if (this.getAuthCenterInfo.status === "TRIAL") {
        this.dialogVisible = true
      } else if (this.line_status === "offline") {
        this.offlineDialogVisible = true
      } else {
        this.dialogVisible = true
      }
    },
    //正式在线解绑
    async dialogSubmit() {
      this.dialogLoading = true
      await unbindAuth({ online: true })
      await this.$store.dispatch("GetLicenseInfoDto")
      this.$message.success(this.$t("sys.operation_success"))
      this.cancelUnbind()
      this.$emit('changeStatus', { type: 'unbind' })
    },
    //离线解绑
    async offlineSubmit() {
      if (this.step === 0) {
        this.offlineDialogLoading = true
        // 删除授权文件
        await unbindAuth({ online: false })
        // 重新获取授权信息
        await this.$store.dispatch("GetLicenseInfoDto")
        // 获取离线激活二维码信息
        const msg = await getRemoteUnbindInfo()
        if (msg) {
          this.QRcodeUrl = await QRCODE.toDataURL(msg, {
            margin: 2,
          })
          this.step++
        }
        this.offlineDialogLoading = false
      } else if (this.step === 1) {
        this.offlineDialogLoading = true
        // 确认解绑
        await confirmUnbind()
        // 重新获取授权信息
        await this.$store.dispatch("GetLicenseInfoDto")
        this.$message.success(this.$t("sys.operation_success"))
        this.$emit('changeStatus', { type: 'unbind' })
      }
    },
    //取消 正式在线解绑
    cancelUnbind() {
      this.dialogVisible = false
      this.dialogLoading = false
    },
    //取消 正式离线解绑
    cancelOfflineUnbind() {
      this.offlineDialogVisible = false
      this.step = 0
      this.QRcodeUrl = ""
      this.offlineDialogLoading = false
    },
  },
}
</script>

<style lang="scss" scoped>
.authorization {
  &_status {
    margin-bottom: 24px;
    background-color: rgba(237, 237, 237, 1);
    border-radius: 4px;
    line-height: 44px;
    border: 1px rgba(231, 231, 231, 1);

    .ml80 {
      margin-left: 80px;
    }

    .item-content {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: inherit;
      position: relative;
      top: -2px;
    }
  }

  ::v-deep .el-dialog__header {
    padding: 20px 20px 10px !important;
  }

  ::v-deep .el-dialog__body {
    border-top: none;

    .str {
      padding: 110px 40px 98px;
      font-size: 12px;
    }

    .qrbox {
      padding: 40px 0 60px;
    }

    .dymBtn {
      width: 132px;
    }
  }

  .onlineDialog {
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 17px;
    }

    .content {
      font-size: 12px;
      color: #c0c4cb;
      margin-bottom: 34px;
    }
  }
}
</style>
